<template>
  <a-page-header
    style="border: 1px solid rgb(235, 237, 240)"
    title="修改信息"
  />
  <a-form :model="user" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-item
      label="用户名"
      has-feedback
      :validateStatus="type1"
      :help="message1"
    >
      <a-input
        v-model:value="user.user_name"
        placeholder="请输入用户名"
        @change="checkName"
      />
    </a-form-item>

    <a-form-item label="年龄">
      <a-input v-model:value="user.user_age" placeholder="请输入年龄" />
    </a-form-item>

    <a-form-item
      label="电话"
      has-feedback
      :validate-status="type3"
      :help="message3"
    >
      <a-input
        v-model:value="user.user_phone"
        @change="checkPhone"
        placeholder="请输入电话号"
      />
    </a-form-item>

    <a-form-item
      label="新邮箱"
      has-feedback
      :validateStatus="type5"
      :help="message5"
    >
      <a-input
        v-model:value="user.email"
        placeholder="请输入用户新邮箱用以验证"
        @change="checkEmail"
      />
    </a-form-item>

    <a-form-item
      label="验证码"
      has-feedback
      :validate-status="type6"
      :help="message6"
    >
      <a-input
        v-model:value="user.userCode"
        @change="checkCode"
        placeholder="请输入6位验证码"
      />
    </a-form-item>
  </a-form>
  <a-button
    style="margin-left: 400px"
    id="mailButton"
    :disabled="buttonStatus1"
    @click="
      sendmail();
      f();
    "
    >点击发送验证码</a-button
  >
  <a-button :disabled="buttonStatus2" style="margin-left: 230px" @click="update"
    >更新信息</a-button
  >
</template>
<script setup>
////////////////////////////////////////////
import { reactive, ref } from "vue";
import { post, setLocalToken } from "@/common";
import { useRouter } from "vue-router";
import { get } from "@/common";
import { message } from "ant-design-vue";
////////////////////////////////////////////
const user = reactive({
  user_age: "",
  user_phone: "",
  user_name: "",
  email: "",
  userCode: "",
});

const labelCol = {
  span: 4,
};
const wrapperCol = {
  span: 14,
};

const type1 = ref("");
const message1 = ref("");

const type3 = ref("");
const message3 = ref("");

const type2 = ref("");
const message2 = ref("");

const type4 = ref("");
const message4 = ref("");

const type5 = ref("");
const message5 = ref("");

const type6 = ref("");
const message6 = ref("");

const buttonStatus2 = ref(true);
const buttonStatus1 = ref(true);

const router = useRouter();

var OldEmail = "";
////////////////////////////////////////////
var wait = 60;

const f = () => {
  time(document.getElementById("mailButton"));
};

const time = (obj) => {
  if (wait === 0) {
    obj.removeAttribute("disabled");
    obj.innerHTML = "获取验证码";
    wait = 60;
  } else {
    obj.setAttribute("disabled", true);
    obj.innerHTML = wait + "秒后重新发送";
    wait--;
    setTimeout(function () {
      time(obj);
    }, 1000);
  }
};

const checkPhone = () => {
  if (user.user_phone.length == 11) {
    type3.value = "success";
    message3.value = "";
  } else {
    type3.value = "error";
    message3.value = "请输入正确的电话号";
  }
};

const checkName = () => {
  if (user.user_name.length > 0) {
    type1.value = "success";
    message1.value = "";
  } else {
    type1.value = "error";
    message1.value = "名称不为空";
  }
};

const checkEmail = () => {
  if (
    user.email.indexOf("@") != -1 &&
    (user.email.indexOf(".com") != -1 || user.email.indexOf(".cn") != -1)
  ) {
    type5.value = "success";
    message5.value = "";
    buttonStatus1.value = false;
  } else {
    type5.value = "error";
    message5.value = "请输入正确的邮箱";
    buttonStatus1.value = true;
  }
};



const checkCode = () => {
  if (user.userCode.length == 6) {
    type6.value = "success";
    message6.value = "";
    buttonStatus2.value = false;
  } else {
    type6.value = "error";
    message6.value = "请输入长度正确的验证码";
    buttonStatus2.value = true;
  }
};

const sendmail = () => {
  if (OldEmail == user.email) {
    post("/security/EmailConfirm/SendMail", user).then((res) => {
      if (res.success) {
        message.success(res.message);
      } else {
        message.error(res.message);
      }
    });
  } else {
    post("/security/EmailConfirm/isEmailUnique", user).then((res) => {
      if (res.success) {
        if (res.message == "true") {
          message.error("邮箱已存在！！！");
        } else {
          post("/security/EmailConfirm/SendMail", user).then((res) => {
            if (res.success) {
              message.success(res.message);
            } else {
              message.error(res.message);
            }
          });
        }
      }
    });
  }
};

const getUserInfo = () => {
  get("/security/updateInfo/getUserInfo").then((res) => {
    user.user_age = res.data.list[0].age;
    user.user_phone = res.data.list[0].phone;
    user.user_name = res.data.list[0].user_name;
    user.email = res.data.list[0].email;
    OldEmail = res.data.list[0].email;
    // console.log(res.data.list[0].age);

     if (
    user.email.indexOf("@") != -1 &&
    (user.email.indexOf(".com") != -1 || user.email.indexOf(".cn") != -1)
  ) {
    type5.value = "success";
    message5.value = "";
    buttonStatus1.value = false;
  } else {
    type5.value = "error";
    message5.value = "请输入正确的邮箱";
    buttonStatus1.value = true;
  }
  });
  
};

getUserInfo();

const update = () => {
  post("/security/updateInfo", user).then((res) => {
    if (res.success) {
      message.success(res.message);
      router.go(-1);
    } else {
      message.error(res.message);
    }
  });
};
</script>

<style>
</style>